<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="名称" prop="name">
                <el-input
                    clearable
                    v-model="name"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    {{ buttons.search.name }}
                </el-button>
                <el-button @click="resetForm(queryForm, params, getDataList)">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: current,
                pageSize: size,
                total: total,
            }"
        >
            <template #tool_bar>
                <el-button
                    v-permission="['add']"
                    size="small"
                    type="primary"
                    @click="handleEdit(buttons.add.name)"
                >
                    {{ buttons.add.name }}
                </el-button>
                <el-row :gutter="20" class="application_item_class_">
                    <el-col
                        v-for="(applicationItem, index) in tableData"
                        :key="index"
                        :span="8"
                    >
                        <el-card>
                            <el-image
                                :key="index"
                                class="pl-10 pr-10"
                                style="width: 68px; height: 36px"
                                :src="require('../../../static/database.png')"
                                fit="contain"
                                v-on:click="linkToApplication(applicationItem)"
                            />
                            <el-descriptions
                                title="应用信息"
                                :column="1"
                                border
                            >
                                <el-descriptions-item
                                    label="应用名称"
                                    label-align="left"
                                    align="center"
                                >
                                    <el-tag size="small"
                                        >{{ applicationItem.name }}
                                    </el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item
                                    label="应用地址"
                                    label-align="left"
                                    align="center"
                                    >{{ applicationItem.url }}
                                </el-descriptions-item>
                                <el-descriptions-item
                                    label="是否站内"
                                    label-align="left"
                                    align="center"
                                >
                                    {{
                                        applicationItem.isStation === true
                                            ? "站内"
                                            : "站外"
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item
                                    label="是否新窗口打开"
                                    label-align="left"
                                    align="center"
                                >
                                    {{
                                        applicationItem.openNewWindow === true
                                            ? "新窗口打开"
                                            : "本窗口打开"
                                    }}
                                </el-descriptions-item>
                            </el-descriptions>

                            <el-button
                                v-permission="['edit']"
                                @click.prevent="
                                    handleEdit(
                                        buttons.edit.name,
                                        applicationItem,
                                    )
                                "
                                type="primary"
                                size="small"
                            >
                                {{ buttons.edit.name }}
                            </el-button>
                            <el-button
                                v-permission="['del']"
                                @click.prevent="handleDel(applicationItem.id)"
                                type="danger"
                                size="small"
                            >
                                {{ buttons.del.name }}
                            </el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
        </ve-table>

        <!-- 编辑组件 -->
        <application-edit
            v-if="showDialog"
            :rowData="rowData"
            :title="dialogTitle"
            :showDialog="showDialog"
            @closeDialog="handelDialog($event)"
        />
    </div>
</template>
<script>
import menu from "@/views/pages/application/components/menu";
import { moduleName } from "@/config";

export default {
    data: () => ({
        description: "应用管理",
        buttons: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
        },
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "Pointer",
        name: "应用管理",
        parentMenu: menu,
        module: moduleName,
    }),
};
</script>

<script setup>
import ApplicationEdit from "./components/ApplicationEdit.vue";
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";

//*导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    handleCurrentChange,
} from "@/views/pages/common";

const { proxy } = getCurrentInstance();

const rowData = ref(null);
const dialogTitle = ref("");
const showDialog = ref(false);

const queryForm = ref(null);
const tableData = ref([]);
const params = reactive({
    name: "",
    size: 10,
    current: 1,
    total: 0,
});
const { name, size, current, total } = toRefs(params);

/**
 * @description:添加or编辑事件
 * @return {*}
 * @param title
 * @param row
 */
const handleEdit = (title, row = null) => {
    showDialog.value = true;
    dialogTitle.value = title;
    rowData.value = row;
};
/**
 * 跳转到应用
 * @param applicationItem
 */
const linkToApplication = (applicationItem = null) => {
    let protocol = window.location.protocol;
    let hostname = window.location.hostname;
    let port = window.location.port;
    if (applicationItem.openNewWindow) {
        if (applicationItem.isStation) {
            console.log("站内应用新窗口打开");
            let url = applicationItem.url;
            if (applicationItem.url && applicationItem.url.startsWith("/")) {
                url = applicationItem.url.substring(
                    applicationItem.url.indexOf("/") + 1,
                    applicationItem.url.length,
                );
            }
            window.open(protocol + "//" + hostname + ":" + port + "/" + url);
        } else {
            console.log("站外应用新窗口打开");
            window.open(applicationItem.url);
            console.log(applicationItem);
        }
    } else {
        if (applicationItem.isStation) {
            console.log("站内应用本窗口打开");
            let url = applicationItem.url;
            if (applicationItem.url && applicationItem.url.startsWith("/")) {
                url = applicationItem.url.substring(
                    applicationItem.url.indexOf("/") + 1,
                    applicationItem.url.length,
                );
            }
            window.location.href =
                protocol + "//" + hostname + ":" + port + "/" + url;
        } else {
            console.log("站外应用本窗口打开");
            window.location.href = applicationItem.url;
            console.log(applicationItem);
        }
    }
};
/**
 * @description: dialog事件
 * @param {*}
 * @return {*}
 */
const handelDialog = (e) => {
    showDialog.value = e;
    getDataList();
};
/**删除行数据
 * @description:
 * @param {*}
 * @return {*}
 */
const handleDel = (id) => {
    proxy
        .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
        })
        .then(async () => {
            try {
                const { code } = await VE_API.application.applicationRemove({
                    id,
                });
                if (code === 0) {
                    ElMessage.success("删除成功");
                    getDataList();
                } else {
                    // 业务错误已在axios拦截器中处理
                    console.warn("删除应用失败:", code);
                }
            } catch (error) {
                // 网络错误等异常情况已经在axios拦截器中处理
                console.error("删除应用异常:", error);
            }
        })
        .catch(() => {
            proxy.$message({
                type: "info",
                message: "已取消删除",
            });
        });
};
/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    try {
        const { code, data } =
            await VE_API.application.applicationFindPage(params);
        if (code === 0) {
            const { size, current, total, records } = data;
            params.size = size;
            params.current = current;
            params.total = total;
            tableData.value = records;
        } else {
            // 业务错误已在axios拦截器中处理
            console.warn("获取应用列表失败:", data?.message);
        }
    } catch (error) {
        // 网络错误等异常情况已经在axios拦截器中处理
        console.error("获取应用列表异常:", error);
    }
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss" scoped>
.application_item_class_ {
    width: 100%;
}
</style>
